<template>
  <div class="banner">
    <swiper
      indicator-dots
      :autoplay="autoplay"
      circular
      :slides-per-view="slidesPerView"
      :space-between="spaceBetween"
    >
      <swiper-slide v-for="(item, i) in list" :key="i">
        <img :src="item.url" alt="" />
      </swiper-slide>
    </swiper>
  </div>
</template>
<script setup>
import "swiper/css";
import { Swiper, SwiperSlide } from "swiper/vue";

/*{Node_modules=swiper^11.1.14}*/

const props = defineProps({
  config: {
    type: Object,
    default: () => {
      return {
        autoplay: {
          type: Boolean,
          default: true,
        },
        slidesPerView: {
          type: Number,
          default: 1,
        },
        spaceBetween: {
          type: Number,
          default: 0,
        },
      };
    },
  },
  data: {
    type: Array,
    default: () => [],
  },
});

/**
 * 数据列表
 */
const list = ref([]);

watch(
  () => props.data,
  (val) => {
    list.value = val;
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>
<style scoped lang="scss">
.banner {
  width: 100%;
  overflow: hidden;
  img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
  }
}
</style>
